<template>

</template>
<script setup>
import { getWuhanBridges } from '@/api';
import { inject, onMounted, onBeforeUnmount } from 'vue'
import { LineLayer, Popup } from '@antv/l7'
const { map, scene } = inject('mapScene')
let popup, bridgeLayer

onMounted(async () => {
    map.flyTo({
        center: [114.26459274967397, 30.5002467409972],
        zoom: 13.2,
        pitch: 67.48,
        bearing: -20.81,
    })
    const { data } = await getWuhanBridges()
    popup = new Popup()
    bridgeLayer = new LineLayer({}).
        source(data).
        color('name', ['yellow', 'red', 'blue', 'green'])
        .size(10)
        .shape('arc3d')

    scene.addLayer(bridgeLayer)
    scene.addPopup(popup)

    bridgeLayer.on('click', e => {
        const {
            feature: {
                properties: { name, info },
            },
            lngLat,
        } = e
        //设置popup显示内容
        popup.setLngLat(lngLat)
        popup.setHTML(`<p style="font-size:12px">${info}</p>`)
        popup.setTitle(name)
    })

})

onBeforeUnmount(() => {
    scene.removeLayer(bridgeLayer)
    scene.removePopup(popup)
})
</script>
<style scoped></style>